<template>
    <div>
            <el-form :model="param" inline style="text-align: left; position: relative;">
                <el-form-item label="部门编号">
                    <el-input v-model="param.deptno" placeholder="请输入编号" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-input v-model="param.dname" placeholder="请输入名称" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="addDept">新增</el-button>
                    <el-button type="primary" @click="editSelectedDept">编辑</el-button>
                    <el-button @click="removeSelectedDept">删除</el-button>
                </el-form-item>
            </el-form>

            <el-table
                :data="tableData"
                border
                style="width: 100%"
                height="444px"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="deptno" label="部门编号" width="120" align="center"></el-table-column>
                <el-table-column prop="dname" label="部门名称" min-width="120" align="center"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEditDept(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="text" size="small" @click="handleRemoveDept(scope.row)" >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                style="margin-top: 20px; text-align: right;"
                :current-page="parseInt(param.page)"
                :page-size="parseInt(param.limit)"
                :page-sizes="[7,10,15,20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>

        <dept-info
        :visible.sync="deptVisible"
        dialog-title="部门详情"
        :dept-data="currentDept"
        @close="handleDeptClose">
        </dept-info>
    </div>
</template>

<script>
import DeptInfo from '@/components/DeptInfo.vue';

export default {
    name: 'deptList',
    components: {
        DeptInfo
    },
    data() {
        return{
            tableData: [],
            param: {
                deptno: null,
                dname: '',
                page: '1',
                limit: '7',
            },
            total: 0,
            checkedData: [],
            deptVisible: false,
            currentDept: {}
        }
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            this.$http.post('/getDept',this.param).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.count;
            }).catch(() => {
                this.$message.error('获取数据失败')
            })
        },

        handleSearch() {
            this.param.page = 1
            this.getTableData()
        },

        handleReset() {
            this.param = {
                page: '1',
                limit: '7',
                deptno: null,
                dname: ''
            }
            this.getTableData()
        },

        handleSizeChange(val) {
            this.queryParams.limit = val
            this.getTableData()
        },

        handleCurrentChange(val) {
            this.param.page = val
            this.getTableData()
        },

        handleSelectionChange(val) {
            this.checkedData = val
        },

        addDept() {
            this.deptVisible = true
            this.currentDept = {}
        },

        handleEditDept(row) {
            this.deptVisible = true
            this.currentDept = row
        },

        editSelectedDept() {
            if (this.checkedData.length === 0) {
                this.$message.warning('请选择需要编辑的部门')
                return
            }
            if (this.checkedData.length > 1) {
                this.$message.warning('只能选择一个部门')
                return
            }
            this.deptVisible = true
            this.currentDept = this.checkedData[0]
        },

        handleRemoveDept(row){
            this.$confirm('确定要删除所选部门吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let deptnos = []
                deptnos.push(row.deptno)
                this.$http.post('/deleteDept',deptnos).then(res=>{
                    debugger
                    if(res.data === 'success') {
                        this.$message.success('删除成功')
                        this.getTableData()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })       
            })
        },

        removeSelectedDept(){
            if (this.checkedData.length === 0) {
                this.$message.warning('请选择需要删除的部门')
                return
            }
            this.$confirm('确定要删除所选部门吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let deptnos = []
                for(let dept of this.checkedData){
                    deptnos.push(dept.deptno)
                }
                this.$http.post('/deleteDept',deptnos).then(res=>{
                    if(res.data === 'success') {
                        this.$message.success('删除成功')
                        this.getTableData()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })       
            })
        },

        handleDeptClose() {
            this.deptVisible = false
            this.currentDept = {}
            this.getTableData()
        }
    }
}
</script>

<style>

</style>